<template>
  <div id="app1">
    <el-container>
      <el-header class="header" style="height: 65px;">
        <div class="toubu">
          <img alt="" src="http://weldon.net.cn/back/img/logo.5b13fac4.png" srcset="">
          <el-popconfirm
              title="确定退出吗？"
              @confirm="confirm"
          >
            <el-button slot="reference" class="btn">退出</el-button>
          </el-popconfirm>
        </div>

      </el-header>
      <el-container>
        <el-aside class="aside" width="200px">
              <el-menu
                  router
                  :unique-opened="true"
                  active-text-color="#ffd04b"
                  background-color="#313743"
                  class="el-menu-vertical-demo"
                  default-active="2"
                  text-color="#fff"
                  @close="handleClose"
                  @open="handleOpen">
                <el-menu-item index="/welcome">
                  <i class="el-icon-user-solid"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu :index="item.id+''" v-for=" item in list" :key="item.id">
                  <template slot="title">
                    <i :class="menuslist[item.id]"></i>
                    <span>{{ item.authName }}</span>
                  </template>
                  <el-menu-item-group  >
                    <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id">    <i class="el-icon-menu
"></i>{{subItem.authName}} </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>

        </el-aside>

        <el-main class="pic">

          <div><router-view></router-view></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
<!--  <router-view></router-view>-->
</template>
<script>
import {menus} from "@/api/user";

export default {
  data() {
    return {
      list:[],
      menuslist:{
        '125':'el-icon-user',
        '103':'el-icon-box',
        '101':'el-icon-suitcase-1',
        '102':'el-icon-tickets',
        '145':'el-icon-s-platform'
      }

    }
  },
  methods: {
    confirm() {
      this.$store.commit('user/del')
      this.$router.push('/login')
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    async getmenu() {
      const res   = await menus()
      // console.log(res)
   if(res.meta.status!==200) {
     return this.$message.error(res.meta.msg)
   }
   this.list=res.data
    }
  },
  async created() {
    this.getmenu()
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  //padding: 0;
}

#app1 {
  //background-color: pink;
  width: 100vw;
  height: 100vh;

  .header {
    background-color: #363d40;
    height: 50px;
    color: #fff;

    .toubu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 15px;

      .btn {
        background-color: #909399;
        border: none;
        color: #fff;
      }
    }

    img {
      width: 300px;
      height: 100%;
    }

    .out {
      background-color: #a6a9ad;
      color: #fff;
      width: 70px;
      height: 40px;
      border: none;
    }
  }

  .pic {
    //display: flex;
    p {
      font-family: magicFont;
      font-size: 40px;
      margin-left: 350px;
    }

    background-color: #e9edf1;

    .pic1 {
      width: 400px;
      height: 350px;
      margin-left: 380px;
    }
  }

  .aside {
    background-color: #363d40;
    height: 90vh;
    color: #fff;
  }
}

.tac {
  width: 403px;
}
</style>